<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <!-- 在 v-for 里遍历数组 -->
        <ul>
            <li v-for="item in items">
                {{item.message}}
             </li>
         </ul>
        <ul>
            <li v-for="(item,index) in items">
               {{index}} - {{item.message}}
            </li>
        </ul>
        <!-- 在 v-for 里遍历对象 -->
        <ul>
            <li v-for="item in myObject">
               {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,key) in myObject">
               {{key}} - {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,key,index) in myObject">
               {{index}} : {{key}} - {{item}}
            </li>
        </ul>
        <!-- 在 <template> 中使用 v-for -->
        <ul>
            <template v-for="n in 5">
                <li>{{n*2-1}}</li>
                <li>{{n*2}}</li>
            </template>
        </ul>
    </div>
    vm.items.push({message:'Baz'})
    vm.items.push({message:'lzh"})
    <script>
        const options = {
            data() {
                return {
                    items:[
                        {message:'foo'},
                        {message:'abc'},
                        {message:'bar'}
                    ],
                    myObject:{
                        title:'How to do lists in vue',
                        author:'lzh',
                        publishedAt:'2020-12-29'
                    }
                }
            },
        }
        const vm = Vue.createApp(options).mount("#app")
    </script>
</body>
</html>